<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel='stylesheet' href='../../mapbox-gl.css' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .mapboxgl-marker {
            width: 10px;
            height: 10px;
            background: red;
            margin-top: -5px;
            margin-left: -5px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script src="../../libs/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapbox-gl-dev.js"></script>
    <script type="text/javascript" src="../../libs/deckgl/deck.gl.js"></script>
    <script type="text/javascript" src="../../iclient9-mapboxgl.js"></script>
    <script type="text/javascript">
        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "type": "raster",
                        "tiles": ['http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}'],
                        "tileSize": 256
                    }
                },

                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            crs: mapboxgl.CRS.EPSG4326,
            center: [-73.834290, 40.725818], // starting position
            zoom: 11 // starting zoom
        });
        $.get('../../data/nyc_census_data.json', function (features) {
            addLayer(features.features);
        });


        function addLayer(features) {

            deckglLayer = new mapboxgl.supermap.DeckglLayer("polygon-layer", {
                data: features,
                props: {
                    stroked: false,
                    extruded: true,
                    filled: true,
                    opacity: 0.7,
                    autoHighlight: true,
                    coordinateSystem:3,
                    isGeographicCoordinateSystem:true,
                    highlightColor: [255, 255, 0, 255],
                    lightSettings: {
                        lightsPosition: [-73, 40, 5000, -74, 41, 5000],
                        ambientRatio: 0.2,
                        diffuseRatio: 0.5,
                        specularRatio: 0.3,
                        lightsStrength: [1.0, 0.0, 2.0, 0.0],
                        numberOfLights: 2
                    }
                },
                callback: {
                    getPolygon: function (feature) {
                        if (!feature.geometry || !feature.geometry.coordinates) {
                            console.log(feature);
                            return [0, 0]
                        }
                        return feature.geometry.coordinates;
                    },
                    getElevation: d => d.properties.Population / 8,
                    getFillColor: function (feature) {
                        if (feature.properties.Population >= 0 && feature.properties.Population < 1670.5) {
                            return [25, 66, 102];
                        } else if (feature.properties.Population >= 1670.5 && feature.properties.Population <
                            2259.0) {
                            return [53, 92, 125];
                        } else if (feature.properties.Population >= 2259.0 && feature.properties.Population <
                            2862.88) {
                            return [99, 97, 127];
                        } else if (feature.properties.Population >= 2862.88 && feature.properties.Population <
                            3426.50) {
                            return [145, 102, 129];
                        } else if (feature.properties.Population >= 3426.50 && feature.properties.Population <
                            4013.25) {
                            return [192, 108, 132];
                        } else if (feature.properties.Population >= 4013.25 && feature.properties.Population <
                            4814.00) {
                            return [210, 131, 137];
                        } else if (feature.properties.Population >= 4814.00 && feature.properties.Population <
                            6204.25) {
                            return [229, 154, 143];
                        } else if (feature.properties.Population >= 6204.25) {
                            return [248, 177, 149];
                        }

                        return [0, 0, 0, 0]
                    }
                }
            });
            map.addLayer(deckglLayer);
        }

    </script>

</body>

</html>
